<template>
    <div class="page">
        <div class="content" ref="echarts"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            echarts: null
        }
    },
    methods: {
        // 检测屏幕
        screen() {
            this.echarts.resize();
            // 获取屏幕可视宽度
            let width = this.$refs.echarts.offsetWidth

            // 设置标题大小
            let num = (width / 100) * 2.5;
            // 设置饼状图内圆的大小
            let innerRadius = num * 2;

            // 设置饼状图外圆的大小
            let outerRadius = innerRadius * 1.3;
            console.log(innerRadius,outerRadius);
            let seriesRadius = [1, 2, 3, 4].map((item, index) => {
                return {
                    radius: [innerRadius, outerRadius],
                    label: {
                        fontSize: num
                    }
                }
            })
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                },
                series: seriesRadius
            }
            // 重新绘制图表
            this.echarts.setOption(options)
        },
        // 初始化echarts
        initEcharts() {
            let echarts = this.$refs.echarts;
            this.echarts = this.$echarts.init(echarts,this.themeStatus);

        },
        // 请求数据
        async getData() {
            let dataList = await this.$axios('/cropAreasProportion');
            // console.log(dataList);
            let centerList = [
                ['20%', '50%'],
                ['40%', '50%'],
                ['60%', '50%'],
                ['80%', '50%'],
            ]
            let seriesData = dataList.data.map((item, index) => {
                return {
                    type: 'pie',
                    center: centerList[index],
                    radius: [50, 65],
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: 25
                    },
                    data: [
                        {
                            name: item.areas + '\n' + item.zb + '%',
                            value: item.zb
                        }, {
                            value: item.other
                        }
                    ]
                }
            })

            let options = {
                title: {
                    text: '主要地区农作物种植区域占比',
                    top: 20,
                    left: 20
                },
                series: seriesData
            };
            this.setOption(options)
        },
        // 绘制图标
        setOption(options) {
            // let options = {
            //     series: options
            // }
            this.echarts.setOption(options);
            this.screen()
        }
    },
    mounted() {
        this.initEcharts();
        this.getData();
        // 实时检测屏幕宽度
        window.addEventListener('resize', this.screen)
        // this.screen()
       
    },
    watch: {
        // 监听切换主题
        themeStatus() {
            // 销毁之前的实例
            this.echarts.dispose();
            this.initEcharts();
            this.getData()
            // this.screen();
        }
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>